import {Menu} from 'antd';
import {SIDEBARS} from '../static/default-data'
import Router from 'next/router'
import {Box, FontIcon} from '../components'
import {CurrentUser} from '../graphql'

const SubMenu = Menu.SubMenu;

const SideBar = ({sidebarIndex}) => (
    <Box height='100%' width='9rem' bgColor='#f8f8f9' padding='1rem 0 0 0'>
        <CurrentUser render={({currentUser}) => (
            <Menu
                defaultSelectedKeys={[sidebarIndex || '0']}
                defaultOpenKeys={['0']}
                onClick={x => {
                    Router.push(x.item.props.router);
                    return x
                }}
                mode="inline"
                theme="transparent"
            >
                {(SIDEBARS[currentUser.userKind]||[]).map((sidebar, index) => (
                    <Menu.Item key={index} router={sidebar.router}>
                        <FontIcon icon={sidebar.icon}/>
                        <span style={{marginLeft: '.5rem'}}>{sidebar.name}</span>
                    </Menu.Item>
                ))}
            </Menu>
        )}/>
    </Box>
)

export default SideBar